<!--
 * @Author: your name
 * @Date: 2021-11-20 15:59:01
 * @LastEditTime: 2021-11-20 16:30:39
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \shenshan_cim\src\views\Home\swyzt\swxz\infotree\index.vue
-->

<template>
  <div class="infotree">
    <div class="tree" v-for="(root, index) in TreeInfo" :key="root.key">
      <a-collapse v-if="root.children">
        <a-collapse-panel :key="index" :header="root.name">
          <div class="box-card ">
            <div
              v-for="(item, index) in root.children"
              :key="index"
              class="text item"
            >
              <el-checkbox @change="switchchange(item)" v-model="item.show">
              </el-checkbox>

              <span>
                {{ item.name }}
              </span>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
      <div v-if="!root.children" class="box-card box-card_self">
        <div class="text item">
          <el-checkbox @change="switchchange(root)" v-model="root.show">
          </el-checkbox>

          <span>
            {{ root.name }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import treeinfodata from "./treeinfo.json";

export default {
  data() {
    return {
      TreeInfo: null,
      activeNames: ["1"],
    };
  },
  computed: {},
  watch: {},
  methods: {
    async loadTree() {
      console.log(treeinfodata);
      this.TreeInfo = treeinfodata.TreeInfo;
    },
    switchchange(val) {
      console.log(val);
    },
  },
  created() {},
  mounted() {
    this.loadTree();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style lang="scss" scoped>
.infotree {
  width: 190px;
  // height: 200px;
  max-height: 300px;
  // background: rgba(0, 0, 0, 0.384);
  overflow: auto;
  position: absolute;
  top: 0px;
  left: -250px;
  color: #fff;
  z-index: 200;
}

.box-card_self {
  margin-left: -15px;
}
.infotree .item {
  padding: 5px 0px 5px 30px;
  color: #fff;
  font-size: 12px;
}
.infotree .wmtsitem {
  padding: 5px 0px 5px 30px;
  color: #fff;
  font-size: 12px;
}
.infotree .el-collapse-item__header {
  text-indent: 20px;
  font-size: 16px;
  color: #fff;
  background: rgba(0, 0, 0, 0.568);
}
.infotree .el-collapse-item__wrap {
  background: rgba(0, 0, 0, 0.473);
  color: #fff;
  border-bottom: none;
}
.infotree .el-collapse {
  border-top: none;
  border-bottom: none;
}
</style>
<style lang="scss">
.ant-collapse {
  background: rgba(0, 0, 0, 0.103) !important;
  border: none !important;
  font-size: 16px;
}
.ant-collapse-header {
  color: #fff !important;
  border: none !important;
}
.ant-collapse-content {
  background: rgba(0, 0, 0, 0.103) !important;
  color: #fff !important;
  border: none !important;
}
.ant-collapse > .ant-collapse-item {
  border: none !important;
}
.ant-collapse-content > .ant-collapse-content-box {
  padding: 0 !important;
}
.el-checkbox__inner {
  border: 1px solid rgba(255, 255, 255, 0.774);
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.103) !important;
  margin-right: 5px !important;
}
</style>
